<template>
	<view class="u-page">
		<view class="u-demo-block">
			<view class="u-demo-block__content">
				
				<view class="form-item">
					<view class="form-item-title">手机号</view>
					<u--input
						v-model="form.mobile"
						:inputAlign="inputAlign"
						:color="color"
						border="none"
						disabled
						disabledColor="#fff"
						placeholder="请输入手机号"
					></u--input>
					<view style="width: 6rpx;"></view>
				</view>
				<view class="form-item">
					<view class="form-item-title">用户名</view>
					<u--input
						v-model="form.nickname"
						:inputAlign="inputAlign"
						:color="color"
						border="none"
						disabled
						disabledColor="#fff"
						placeholder="请输入用户名"
					></u--input>
					<view style="width: 6rpx;"></view>
				</view>
				<view class="form-item" @click="showSex = true; hideKeyboard()">
					<view class="form-item-title">性别</view>
					<u--input
						v-model="form.gender"
						:inputAlign="inputAlign"
						:color="color"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择性别"
						border="none"
					></u--input>
					<u-icon
						name="arrow-right"
						:color="color"
						:customStyle="arrowRightStyle"
					></u-icon>
				</view>
				<view class="form-item">
					<view class="form-item-title">年龄</view>
					<u--input
						v-model="form.age"
						:inputAlign="inputAlign"
						:color="color"
						border="none"
						disabledColor="#fff"
						placeholder="请输入年龄"
					></u--input>
					<u-icon
						name="arrow-right"
						:color="color"
						:customStyle="arrowRightStyle"
					></u-icon>
				</view>
				<view class="form-item" @click="showBirthday = true; hideKeyboard()">
					<view class="form-item-title">出生日期</view>
					<u--input
						v-model="form.birth"
						:inputAlign="inputAlign"
						:color="color"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择出生日期"
						border="none"
					></u--input>
					<u-icon
						name="arrow-right"
						:color="color"
						:customStyle="arrowRightStyle"
					></u-icon>
				</view>
				<view class="form-item">
					<view class="form-item-title">体重(kg)</view>
					<u--input
						v-model="form.weight"
						:inputAlign="inputAlign"
						:color="color"
						border="none"
						type="number"
						placeholder="请输入体重"
					></u--input>
					<u-icon
						name="arrow-right"
						:color="color"
						:customStyle="arrowRightStyle"
					></u-icon>
				</view>
				<view class="form-item">
					<view class="form-item-title">身高(cm)</view>
					<u--input
						v-model="form.height"
						:inputAlign="inputAlign"
						:color="color"
						border="none"
						type="number"
						placeholder="请输入身高"
					></u--input>
					<u-icon
						name="arrow-right"
						:color="color"
						:customStyle="arrowRightStyle"
					></u-icon>
				</view>
				
				<view style="padding: 40rpx 30rpx 40rpx;">
					<u-button
						type="primary"
						text="保存"
						@click="submit"
						:customStyle="{'background-color':'#05d380','border':'0'}"
					></u-button>
				</view>
				<u-action-sheet
					:show="showSex"
					:actions="actions"
					title="请选择性别"
					@close="showSex = false"
					@select="sexSelect"
				>
				</u-action-sheet>
				<u-datetime-picker
					:show="showBirthday"
					:value="datePickerValue"
					mode="date"
					:minDate="-2209017943000"
					:maxDate="maxDate"
					closeOnClickOverlay
					@confirm="birthdayConfirm"
					@cancel="birthdayClose"
					@close="birthdayClose"
					:immediateChange="true"
				></u-datetime-picker>
			</view>
		</view>
	</view>
</template>

<script>
	import {updateUserInfo,checkToken} from '@/api/user/index.js'
	
	export default {
		data() {
			const d = new Date()
			return {
				form: {
					mobile: '',
					nickname: '',
					gender: '',
					age: '',
					birth: '',
					height: '',
					weight: ''
				},
				showBirthday: false,
				datePickerValue: Number(d),
				showSex: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					}
				],
				
				inputAlign: 'right',
				color: '#838383',
				arrowRightStyle: {
					'padding-left': '6rpx'
				},
				maxDate: Number(d)
			}
		},
		computed: {
			hasLogin() {
				return this.$store.state.token && this.$store.state.token.length > 0;
			}
		},
		onLoad() {
			uni.hideShareMenu()
			if(this.hasLogin) {
				checkToken()
				this.initData()
			}else{
				this.toLogin()
			}
		},
		methods: {
			hideKeyboard() {
				uni.hideKeyboard()
			},
			navigateBack() {
				uni.navigateBack()
			},
			toLogin() {
				let that = this
				uni.navigateTo({
					url: '/pages/user/login',
					events: {
						loginCompletion(res) {
							that.initData()
						}
					}
				})
			},
			initData() {
				this.form.mobile = this.userInfo.mobile || '未设置'
				this.form.nickname = this.userInfo.nickName || ''
				// if(this.userInfo.gender == 1) {
				// 	this.form.gender = '男'
				// }else if(this.userInfo.gender == 2) {
				// 	this.form.gender = '女'
				// }
				// this.form.height = this.userInfo.height || ''
				// this.form.weight = this.userInfo.weight || ''
				
				// if(this.userInfo.age && Number(this.userInfo.age) > 0) {
				// 	this.form.age = this.userInfo.age
				// }
				// if(this.userInfo.birth && Number(this.userInfo.birth)>0) {
				// 	this.datePickerValue = Number(this.userInfo.birth)*1000
				// 	this.form.birth = this.formatTimestamp(this.userInfo.birth,'onlyDate')
				// }
			},
			sexSelect(e) {
				this.form.gender = e.name
			},
			birthdayClose() {
				this.showBirthday = false
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.form.birth = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				this.datePickerValue = e.value
			},
			submit() {
				// if(this.form.gender.trim() == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择性别'
				// 	})
				// 	return
				// }
				// if(this.form.birth.trim() == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请选择出生日期'
				// 	})
				// 	return
				// }
				
				// if(this.form.weight.trim() == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入体重'
				// 	})
				// 	return
				// }
				// if(this.form.weight <= 0) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入有效的体重'
				// 	})
				// 	return
				// }
				// if(this.form.height.trim() == '') {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入身高'
				// 	})
				// 	return
				// }
				// if(this.form.height <= 0) {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		title: '请输入有效的身高'
				// 	})
				// 	return
				// }
				
				var g = ''
				if(this.form.gender == '男') {
					g = 1
				} else if(this.form.gender == '女') {
					g = 2
				}
				var b = ''
				if(this.form.birth && this.form.birth.length) {
					b = this.datePickerValue/1000
				}
				
				let params = {
					age: this.form.age,
					gender: g,
					height: this.form.height,
					weight: this.form.weight,
					birth: b
				}
				
				uni.showLoading({
					title:'保存中',
					mask:true
				})
				
				updateUserInfo.request(params).then(res => {
					uni.hideLoading()
					if(res.statusCode == 200) {
						let userInfo = {
							...this.$store.state.userInfo,
							...params
						}
						this.$store.dispatch('setUserInfo', userInfo)
						uni.showToast({
							icon:'success',
							title:'保存成功'
						})
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
 .form-item {
	 display: flex;
	 align-items: center;
	 padding: 20rpx	20rpx 20rpx 26rpx;
	 border: 1rpx solid #eee;
	 
	 .form-item-title {
		 width: 180rpx;
	 }
 }
</style>
